<template>
	<view class="sxran-im-video-body" @click="playVideo" ref='vide'>
		<!-- <video :src="'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'"></video> -->
		<image class="video-img" mode="aspectFill" :src="videoPoster" />
		<view class="video-box-mark" />
		<sxran-im-icon name="play-right" size='25' class="play-video-icon"/>
	</view>
</template>

<script>
	export default {
		props: {
			msg: {
				type: Object,
				default () {
					return {
						body: ""
					}
				}
			},
		},
		data() {
			return {
				videoPoster: '', //视频封面
				videoUrl: '', //视频地址
			}
		},
		methods: {
			async playVideo() {
				let url = this.msg.body.url
				// if (uniIm.isWidescreen) {
				//   uni.$emit('uni-im-playVideo', url)
				// } else {
				// uni.navigateTo({
				//   url: "/uni_modules/uni-im/pages/common/video/video?url=" + url,
				//   animationDuration: 300,
				//   animationType: "fade-in"
				// })
				// }
			},
			getFirstFrameFromVideo(videoUrl) {
				return new Promise((resolve, reject) => {
					const video = document.createElement('video');
					video.src = 'https://video-qn.ibaotu.com/20/03/16/55u888piC3Wn.mp4';
					// video.src = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
					
					video.onloadeddata = (res) => {
						video.width = video.videoWidth;
						video.height = video.videoHeight;

						const canvas = document.createElement('canvas');
						canvas.width = video.videoWidth;
						canvas.height = video.videoHeight;

						const context = canvas.getContext('2d');
						if (context) {
							context.drawImage(video, 0, 0, canvas.width, canvas.height);
							const frameImage = canvas.toDataURL('image/png');
							resolve(frameImage);
						} else {
							reject(new Error('无法获取Canvas上下文'));
						}

						// URL.revokeObjectURL(video.src);
					};

					// video.onerror = (error) => {
					// 	console.log(error)
					// 	reject(new Error('视频加载失败'));
					// };

					
					video.load();
					video.currentTime = 5;
				});
			}
		},
		watch: {
			'msg.body': {
				handler:async function(msgBody) {
					this.videoUrl = this.msg.body.url;
					//设置videoPoster
					if (this.videoUrl) {
						// #ifdef H5
						try {
							const frameImage = await this.getFirstFrameFromVideo(this.videoUrl);
							this.videoPoster = frameImage
							// console.log('start')
							// let videoEl = document.createElement("video");
							// videoEl.src = this.videoUrl
							// videoEl.currentTime = 1
							// let canvasEl = document.createElement("canvas");
							// let context = canvasEl.getContext("2d");
							// // console.log('videoEl',videoEl);
							// videoEl.addEventListener('loadeddata', () => {
							// 	console.log('firstFrameUrl', firstFrameUrl);
							// 	canvasEl.width = videoEl.videoWidth;
							// 	canvasEl.height = videoEl.videoHeight;
							// 	context.drawImage(videoEl, 0, 0, canvasEl.width, canvasEl.height);
							// 	let firstFrameUrl = canvasEl.toDataURL();
							// 	console.log('firstFrameUrl', firstFrameUrl);
							// 	this.videoPoster = firstFrameUrl
							// });
						} catch (e) {
							console.error('浏览器环境，获取本地视频封面失败。将使用默认图片', e)
							// this.videoPoster = '/uni_modules/uni-im/static/msg/video-uploading.gif'
						}
						// #endif

						// #ifndef H5
						// this.videoPoster = '/uni_modules/uni-im/static/msg/video-uploading.gif'
						// #endif
					} else {
						// 如果链接带?号则加&否则加?
						this.videoPoster = this.videoUrl + (this.videoUrl.indexOf('?') > -1 ? '&' : '?')
						// 根据文件存储的服务商，传不同的参数获取视频封面
						const paramObj = {
							aliyun: 'x-oss-process=video/snapshot,t_0,f_jpg,w_200,m_fast,ar_auto',
							tencent: 'imageView2/0/w/200',
							qiniu: 'vframe/jpg/offset/0/w/200'
						}

						console.log(1111)
						// this.videoPoster += paramObj[config.cloudFile.provider]
						// console.log('this.videoPoster',this.videoPoster);
					}
				},
				deep: true,
				immediate: true
			}
		}
	}
</script>

<style scoped lang="scss">
	.sxran-im-video-body {
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
		width: 200rpx;
		height: 200rpx;
		position: relative;

		.video-img {
			width: 200rpx;
			height: 200rpx;
		}

		.video-box-mark {
			position: absolute;
			inset: 0;
			background-color: rgba(0, 0, 0, 0.1);
		}

		.play-video-icon {
			position: absolute;
			top: calc(50% - 20px);
			left: calc(50% - 20px);
			width: 40px;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			border: 2px solid var(--uni-border-color);
			background-color: rgba(0, 0, 0, 0.2);
			box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
		}
	}
</style>